<!--
  Generated template for the CurrentOrderPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>current-order</ion-title>
  </ion-navbar>

</ion-header>


<ion-content no-bounce>

  <super-tabs>
    <super-tab *ngFor="let category of categoryList" [root]="productListPage" title="{{ category.name }}"></super-tab>
  </super-tabs>

</ion-content>

<ion-footer class="order-summary" [ngClass]="{ 'expanded': !summaryCollapsed }">
  <button class="toggle-button" ion-button color="white" small full (click)="toggleSummary()">
    <i class="fa fa-caret-up" *ngIf="summaryCollapsed"></i>
    <i class="fa fa-caret-down" color="white" *ngIf="!summaryCollapsed"></i>
  </button>
  <div class="order-header">
    <ion-row>
      <ion-col col-8>
        <ion-row>
          <ion-col col-12>
            <div class="order-title active">
              <i class="fa fa-star-o"></i> Current Order
            </div>
          </ion-col>
          <ion-col col-6>
            <button class="order-waiter" ion-button clear full>
              <i class="fa fa-user-circle-o"></i> Strawberry
            </button>
          </ion-col>
          <ion-col col-6>
            <button class="order-type" ion-button clear full>
              <i class="fa fa-cutlery"></i> Table 23
            </button>
          </ion-col>
        </ion-row>
      </ion-col>
      <ion-col col-4>
        <div class="order-status">
          <i class="fa fa-check-circle-o"></i> Serving
        </div>
      </ion-col>
    </ion-row>
  </div>
  <ion-content class="order-items" [ngClass]="{ 'hidden': summaryCollapsed }">
    <ion-list>
      <ion-item-sliding *ngFor="let item of order.items" #row>
        <button ion-item [ngClass]="{
          'item-status-ordered': item.status == 0,
          'item-status-preparing': item.status == 1,
          'item-status-served': item.status == 2
        }">
          <div class="item-photo"><img src="{{ item.photo }}" /></div>
          <div class="item-detail">
            <div>{{ item.name }}</div>
            <div class="text-lowlight text-small">{{ item.desc }}</div>
          </div>
          <div class="item-qty">x {{ item.qty }}</div>
          <div class="item-price">${{ item.unitPrice * item.qty | number: '1.1-1' }}</div>
        </button>
        <ion-item-options side="left">
          <button ion-button color="danger">Ordered</button>
          <button ion-button color="warning">Preparing</button>
          <button ion-button color="success">Served</button>
        </ion-item-options>
        <ion-item-options side="right">
          <button ion-button color="red"><i class="fa fa-trash"></i></button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </ion-content>
  <div class="order-control">
    <button ion-button clear small>
      <i class="fa fa-repeat"></i>
      <div>Clear All</div>
    </button>
    <button ion-button clear small>
      <i class="fa fa-print"></i>
      <div>Print New</div>
    </button>
    <button ion-button clear small>
      <i class="fa fa-comments"></i>
      <div>Notice</div>
    </button>
    <button ion-button clear small>
      <i class="fa fa-pause"></i>
      <div>Hold</div>
    </button>
  </div>
</ion-footer>
